const { reactive, toRefs, onMounted, createApp } = Vue;
const modal = {
  props: {
    state: Object,
  },
  setup(props) {
    const { title, message, duration, show, to } = props.state;
    const state = reactive({
      show: false,
      title: title || "",
      message: message || "",
      duration: duration || 1000,
    });
    const determine = () => {
      state.show = false;
      location.href = to;
    };
    const cancle = () => {
      state.show = true;
    };
    onMounted(() => {
      setTimeout(() => {
        state.show = true;
      }, state.duration);
    });
    return {
      determine,
      cancle,
      ...toRefs(state),
    };
  },
  template: `
  <div class="notice right" v-if="this.show">
      <h3>
        <!-- <slot #title></slot> -->
        {{title}}
      </h3>
      <p>{{message}}</p>
      <div class="ui buttons">
        <button class="button" @click="determine">确定</button>
        <button class="button" @click="cancle">取消</button>
      </div>
    </div>
  `,
};
export default function notice(options) {
  console.log(options);
  const app = createApp(modal, { state: options });
  const parent = document.body;
  console.log(parent);
  const instance = app.mount(parent);
  return instance;
}
